<template>
	<view class="content">
		<!-- <img src="../../static/hot.jpeg" alt="" class="hotImg"> -->
		<view class="main">
			<view class="hotTop">
				<a :href="hotTop.rawUrl">
					<img :src="hotTop.img" mode="aspectFill" alt="">
					<view style="display: flex;flex-direction: column;">
						<h3>{{hotTop.query}}</h3>
						<text>{{hotTop.desc}}</text>
					</view>
				</a>
			</view>
			<view class="hot">
				<view class="hot-view" v-for="(item, index) in hot" :key="index">
					<a :href="item.rawUrl">
						<img :src="item.img" mode="aspectFill" alt="">
						<text>{{item.query}}</text>
					</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotTop: "",
				hot: "",
			}
		},
		mounted() {
			uni.request({
				url: "https://api.a20safe.com/api.php?api=17&key=e5f907b4ba1f08c8503433a5da97f0c9",
				success: (res) => {
					// console.log(res);
					// console.log(res.data.data[0].top[0]);
					// console.log(res.data.data[0].hot);
					this.hotTop = res.data.data[0].top[0]
					this.hot = res.data.data[0].hot
				}
			})
		},
		methods: {

		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	a {
		color: #000;
		text-decoration: none;
	}

	.content {
		width: 100%;
	}

	body {
		background-color: #ddd;
	}

	.hotImg {
		position: relative;
		top: -40px;
		width: 100%;
		height: 160px;
	}

	.main {
		padding: 12px 5px 8px 5px;
		margin: 0 5px;
		width: 97vw;
		background-color: #f1f1f1;
		border-radius: 8px 8px 0 0;
	}

	.hotTop {
		border-bottom: 1px solid #ccc;
		padding-bottom: 12px;
	}

	.hotTop img {
		width: 100%;
	}

	.hot {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20px;
	}

	.hot-view {
		width: 49%;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-radius: 6px;
		background-color: #fff;
	}

	.hot-view img {
		width: 100%;
		border-radius: 6px;
	}
</style>
